$(function(){

	(function (doc, win) {

        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var clientWidth = '',newWidth = '',ctimer = null,
        	sl_margin_left = 0,sl_width = 0,sl_length = 0;
        recalc = function () {

            newWidth = $(window).width();

            clearTimeout(ctimer);

            //if(!clientWidth && newWidth < 1300) return false;

            if(newWidth === clientWidth) return false;

            clientWidth = newWidth;

            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

            ctimer = setTimeout(function(){

            	//loadingChart();
                loadSwiper
            	

            	// swiperSlide(sl_margin_left+sl_width,sl_length,7);

            },25)



        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        recalc();

    })(document, window);

   /**
    * 影片展示 左右切换 一次切换一个
    *
    * view  课件的 slide 数量
    *
    * len  总共的 slide
    *
    * swidth 每次切换的距离
    */
   
   // var sl_left_init = 0;
   
   // function swiperSlide(swidth,len,view){

   // 		if(!swidth || !len || view >= len) return false;

   //  	$('.arrow-left').on('click', function(e){

   //  		e.preventDefault();

   //  		if(Math.abs(sl_left_init) >= (len-view)*swidth) return false;

   //  		sl_left_init -= swidth;

		 //    $(".swiper-slide").css({"left": sl_left_init + "px"});
		    
	  // 	})


	  // $('.arrow-right').on('click', function(e){

		 //    e.preventDefault();

		 //    if(sl_left_init >= 0) return false;

   //  		sl_left_init += swidth;

		 //    $(".swiper-slide").css({"left": sl_left_init + "px"});
		    
	  // })

   // }

    /**
     * 数据来源 提示框
     */
    
    function dataSourceTag(str){

    	str = str || '数据来源 提示框';

    	if($(".qicon-fix").length < 1){

    		return '<div class="qicon-fix">'+str+'</div>';
    	}
    }

    $(".title-qicon").on("mouseover",function(e){

    	var _x = e.pageX,_y = e.pageY,scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    	dataSourceTag();

    	$(".qicon-fix").css({"left": _x - 100 + "px","top": _y - 60 - scrollTop + "px"}).fadeIn();

    	return false;

    })

    $(".title-qicon").on("mouseleave",function(){

    	$(".qicon-fix").hide();
    })


    function showLIines(){
		var myChart = echarts.init(document.getElementById('chart1'));
		 // 指定图表的配置项和数据
	    option = {
	    	baseOption: {
	    		title: {
			    	show: false,
			        text: ''
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			    	show: false,
			        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    // toolbox: {
			    //     feature: {
			    //         saveAsImage: {}
			    //     }
			    // },
			    xAxis: {
			        type: 'category',
			        boundaryGap: true,
			        data: ['周一','周二','周三','周四','周五','周六','周日'],
			        axisLabel: {
	                    textStyle: {
	                        color: '#fff'//坐标轴文字的样式
	                    },
	                    align: "center"
		            },
		            axisLine: {
		            	lineStyle: {
		            		color: "#ccc" //坐标轴的样式
		            	}
		            },
		            axisTick: {
		            	show: false,//x 坐标轴 刻度 设置

		            },
		            // axisTick: {
		            // 	alignWithLabel: true
		            // },
			    },
			    yAxis: {
			        type: 'value',
			        // right: "10px",
			        splitLine:{
		            	show: true,
		            	lineStyle: {
		            		color: "#ccc",//横向分割线的 样式
		            	}
		            },
		            axisLabel: {
		            	formatter: '{value}',
		                textStyle: {
		                    color: '#fff'
		                },
		                // align: 'center'
		            },
		            axisLine: {
		            	lineStyle: {
		            		color: "transparent" //坐标轴的样式
		            	}
		            },
			    },
			    series: [
			        {
			            name:'邮件营销',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[120, 132, 101, 134, 90, 230, 210],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'联盟广告',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[220, 182, 191, 234, 290, 330, 310],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'视频广告',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[150, 232, 201, 154, 190, 330, 410],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'直接访问',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[320, 332, 301, 334, 390, 330, 320],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        },
			        {
			            name:'搜索引擎',
			            type:'line',
			            stack: '总量',
			            smooth: true,
			            data:[820, 932, 901, 934, 1290, 1330, 1320],
			            itemStyle : { //折线拐点标志的样式
			                normal: {
			                    opacity: 0
			                },
			                emphasis: {
			                	opacity: 0
			                }
			                
			            },
			        }
			    ]
	    	},
	    	// media: [
	    	// 	{
	    	// 		query: {
	    	// 			maxWidth: 300,
    		// 			//maxHeight: 300,
    		// 			//minAspectRatio: 1.3//缩放比
	    	// 		},
	    	// 		option: {
	    	// 			grid: {
	    	// 				left: "13%"
	    	// 			}
	    	// 		}
	    	// 	}
	    	// ]
		};

	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
	// showLIines();
	/**
	 * 想看日增平均指数  各种指数
	 */
	function daysAverageIndex(id,str){

		$("#" + id).parent().html('').append('<div id="'+id+'" class="chart-box"></div>');

		var myChart = echarts.init(document.getElementById(id));
		option = {
		    title: {
		    	show: false,
		        text: '',
		        textStyle: {
		            color: '#ffffff',
		            fontSize: 16
		        }
		    },
		    tooltip: {
		    	trigger: 'axis',
		    	position: ['40%', '5%'],
		    	formatter: function(parms){

		    		str = str || '';

		    		var html = '<div style="text-align: center;">'+str+'</div>';

		    		for(var i=0,len = parms.length;i<len;i++){

		    			html += '<div style="text-align: left;font-size: 12px;"><span style="display: inline-block;width: 70px;">'+parms[i].seriesName+':</span>'+parms[i].value+'</div>'

		    		}

		    		return html;
		    	}
		    },
		    grid: {
		    	// width: "90%",
		    	height: "86%",
		    	top: '10%',
		    	containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['上映前30天', '上映前20天', '上映前10天', '上映日'],
		        axisLabel: {
		            textStyle: {
		                color: '#fff'
		            }
		        },
		        axisLine: {
		            lineStyle: {
		                color: '#233e66',
		            }
		        },
		        axisTick: {
		        	show: false,
		            inside: true,
		            alignWithLabel: true
		        },
		    },
		    yAxis: {
		        type: 'value',
		        splitLine:{
	            	show: true,
	            	lineStyle: {
	            		color: "#233e66",//横向分割线的 样式
	            	}
	            },
		        axisLabel: {
		            textStyle: {
		                color: '#ffffff'
		            }
		        },
		        axisLine: {
		            show: false,
		            lineStyle: {
		                color: '#ffffff'
		            }
		        },
		        axisTick: {
		        	show: false
		        }
		    },
		    series: [
		    	{
			        name: '英伦对决',
			        type: 'line',
			        data:[405, 11, 67, 234],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#f03e3e"
		            	}
		            }
			    },
			    {
			        name: '羞羞的铁拳',
			        type: 'line',
			        data: [343, 76, 232, 553],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#ff9641"
		            	}
		            }
			    },
			    {
			        name: '缝纫机乐队',
			        type: 'line',
			        data: [143, 176, 132, 253],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#ffe241"
		            	}
		            }
			    },
			    {
			        name: '空天猎',
			        type: 'line',
			        data: [243, 176, 132, 253],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#7bd93c"
		            	}
		            }
			    },
			    {
			        name: '极致追击',
			        type: 'line',
			        data:[105, 111, 167, 134],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#3cd9ba"
		            	}
		            }
			    },
			    {
			        name: '降魔传',
			        type: 'line',
			        data:[205, 111, 167, 134],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#3c61d9"
		            	}
		            }
			    },
			    {
			        name: '追龙',
			        type: 'line',
			        data:[,343, 76, 232, 553],
			        symbolSize:8,
			        smooth: true,
			        itemStyle : { //折线拐点标志的样式
		                normal: {
		                    opacity: 0
		                },
		                emphasis: {
		                	opacity: 0
		                }
		                
		            },
		            lineStyle: {
		            	normal: {
		            		color: "#bd3cd9"
		            	}
		            }
			    },
		    ],
		    lineStyle: {
                normal: {
	                width: 1
                }
            },
		    //color:['#f03e3e','#ff9641','#ffe241','#7bd93c','#3cd9ba','#3c61d9','#bd3cd9'],
		}

		myChart.setOption(option);

	}


    /**
     * 大盘走势
     */
    function marketTrend(id,dayData,data){

        if(!id) return false;

        $("#" + id).parent().html('').append('<div id="'+id+'" class="chart-box"></div>');

        var myChart = echarts.init(document.getElementById(id));

        option = {
            title: {
                show: false,
                text: '',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 16
                }
            },
            grid: {
                width: "80%",
                height: "76%",
                top: '5%',
                left: '10%',
                containLabel: false
            },
            "dataZoom": [{
                "type": "inside",
                "show": true,
                "height": 15,
                "start": 70,
                "end": 100
            }],
            tooltip: {
                trigger: 'axis',
                position: ['40%', '5%'],
                formatter: function(parms){

                    // str = str || '';

                    var html = '<div style="text-align: center;">大盘走势</div>';

                    for(var i=0,len = parms.length;i<len;i++){

                        html += '<div style="text-align: left;font-size: 12px;"><span style="display: inline-block;width: 70px;">'+parms[i].seriesName+':</span>'+parms[i].value+'</div>'

                    }

                    return html;
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dayData,
                axisLabel: {
                    textStyle: {
                        color: '#0b526b'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#1f344a',
                    }
                },
                axisTick: {
                    show: false,
                    inside: true,
                    alignWithLabel: true
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: 'transparent'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#1f344a'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name: '英伦对决',
                    type: 'line',
                    data:data,
                    symbolSize:8,
                    // smooth: true,
                    itemStyle : { //折线拐点标志的样式
                        normal: {
                            opacity: 0,
                            color: "#ff4f4f"
                        },
                        emphasis: {
                            opacity: 0
                        }

                    },
                    lineStyle: {
                        normal: {
                            color: "#ff4f4f"
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(255, 79, 79, 0.5)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 79, 79, 0)',
                                }],
                                globalCoord: false
                            },
                        }
                    }
                }
            ],
            lineStyle: {
                normal: {
                    width: 1
                }
            },
        }

        myChart.setOption(option);

    }

	// 加载数据表格
	function loadingChart(){
        //
		// daysAverageIndex('chart1','平均想看日增数');
		// daysAverageIndex('chart2');
		// daysAverageIndex('chart3');
		// daysAverageIndex('chart4');
		// marketTrend('chart5');
	}
    getPiaofangList()
    function  getPiaofangList() {
        $.ajax({
            type: 'get',
            url: 'api/index/getPiaofangList',
            dataType: 'json',
            success: function(data){
                var videoList=data.result;
                if(videoList){
                    var _html='';
                    var daydata=[];
                    var _data=[];
                    $.each(videoList,function (index,item) {
                        var _dateSplit=item.curDate.split('-');
                        daydata.push(_dateSplit[1]+'.'+_dateSplit[2])
                        _data.push(item.num)
                    });


                    marketTrend('chart5',daydata,_data);
                    //$('#li_bofangliang').html(_html);



                }
            }
        });
    }
})

function loadSwiper() {
    swiper = null;

    sl_margin_left = parseFloat($(".survey-list").css("margin-left"));

    sl_width = $(".survey-list").width();

    sl_length = $(".survey-list").length;

    console.log((sl_width+20)*sl_length);

    $(".swiper-wrapper,.swiper-slide").width( ($(".survey-list").width()+20)*$(".survey-list").length );

    // $(".swiper-slide").css({"left": "0px"});

    // $('.arrow-left,.arrow-right').off();

    swiper = new Swiper('.swiper-container',{

        scrollContainer: true
    })
}